<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <p id="p1">不凡学院</p>
    <!-- js  事件驱动为核心的 语言 -->

    <!-- 事件 三要素  -->

    <!-- 点击按钮,弹窗打开 -->

    <!-- 事件源:按钮

    事件: 点击(onclick)   鼠标进入/离开(onmouseenter/onmouseleave)  双击(ondbclick)   
    键盘按下/松开(onkeydown/onkeyup)  鼠标按下/松开/移动(onmousedown/onmouseup/onmousemove)   
    聚焦/失去焦点(onfocus/onblur)

    事件处理程序: 弹窗打开 样式修改  内容修改  动效 -->

    <!-- 事件源: 点击p标签 (p标签)
    事件是: onclick;
    处理程序: 改变颜色 -->

    <script>
    // 第一步: 获取事件源

    var pEl = document.getElementById('p1'); // 获取的 是对象   dom元素
    // console.log(pEl);
    // console.dir(pEl);

    // 第二步给事件源绑定事件
    // dom元素.事件名=function(){} 
    pEl.onclick = function(){
        // 第三步事件 处理程序
        pEl.style.color = 'red';
    }


    // 学习:   如何获取事件源

    //  如何绑定事件

    // 事件处理程序
    </script>


</body>

</html>